<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>原始字符串: "{{ message }}"</p>
      <!-- 这里相当于是在抽取函数, 当然和函数有区别，这里相当于做了缓存，减少不必要的计算，只有当计算结果发生改变时才会继续重新调用函数计算 -->
      <p>计算后的反转字符串: "{{ reversedMessage }}"</p>
    </div>
  </body>
</html>
<script src="../js/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "Hello Vue!",
    },
    computed: {
      reversedMessage: function () {
        return this.message.split("").reverse().join("");
      },
    },
  });
</script>
